<template>
    <div class="searchFriend">
        <van-search
            v-model="searchValue"
            placeholder="搜索"
            shape="round"
            show-action
            @cancel="onCancel"
            @input="onInput"
            @focus="$emit('focus')"
            @blur="onCancel"
        />
        <div class="search-results" v-show="searchValue">
            <van-cell-group v-if="searchResults.length">
                <van-cell v-for="friend in searchResults" 
                    :key="friend.friendId._id"
                    :title="getDisplayName(friend)"
                    center
                    clickable
                    @click="handleSelect(friend)"
                >
                    <template #icon>
                        <van-image round width="40" height="40" :src="friend.friendId.headImgUrl" />
                    </template>
                </van-cell>
            </van-cell-group>
            <van-empty v-if="!searchResults.length && showEmpty" description="未找到相关好友" image="search" />
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import pinyin from 'pinyin';

export default {
    name: "SearchFriend",
    data() {
        return {
            searchValue: "",
            searchResults: [],
            showEmpty: false
        };
    },
    computed: {
        ...mapState(['friendList'])
    },
    methods: {
        // 获取显示名称，优先显示备注
        getDisplayName(friend) {
            if (friend && friend.remark && friend.remark.trim() !== '') {
                return friend.remark;
            }
            return friend.friendId.nickname;
        },
        onCancel() {
            this.searchValue = '';
            this.searchResults = [];
            this.showEmpty = false;
            this.$emit('cancel');
            this.$emit('blur');
        },
        onInput() {
            if (!this.searchValue.trim()) {
                this.searchResults = [];
                return;
            }

            const keyword = this.searchValue.toLowerCase();
            this.searchResults = this.friendList.filter(friend => {
                const nickname = friend.friendId.nickname;
                // 原文匹配昵称
                if (nickname.toLowerCase().includes(keyword)) {
                    return true;
                }
                
                // 原文匹配备注
                if (friend.remark && friend.remark.toLowerCase().includes(keyword)) {
                    return true;
                }
                
                // 拼音全拼匹配昵称
                const fullPinyin = pinyin(nickname, {
                    style: pinyin.STYLE_NORMAL,
                    heteronym: true
                }).flat().join('');
                if (fullPinyin.includes(keyword)) {
                    return true;
                }
                
                // 拼音首字母匹配昵称
                const pinyinInitials = pinyin(nickname, {
                    style: pinyin.STYLE_FIRST_LETTER,
                    heteronym: true
                }).flat().join('');
                if (pinyinInitials.includes(keyword)) {
                    return true;
                }
                
                // 如果有备注，也匹配备注的拼音
                if (friend.remark) {
                    // 拼音全拼匹配备注
                    const remarkFullPinyin = pinyin(friend.remark, {
                        style: pinyin.STYLE_NORMAL,
                        heteronym: true
                    }).flat().join('');
                    if (remarkFullPinyin.includes(keyword)) {
                        return true;
                    }
                    
                    // 拼音首字母匹配备注
                    const remarkPinyinInitials = pinyin(friend.remark, {
                        style: pinyin.STYLE_FIRST_LETTER,
                        heteronym: true
                    }).flat().join('');
                    if (remarkPinyinInitials.includes(keyword)) {
                        return true;
                    }
                }
                
                return false;
            });
            
            this.showEmpty = !this.searchResults.length;
        },
        handleSelect(friend) {
            this.$router.push({ 
                path: '/home', 
                query: { user_id: friend.friendId._id } 
            });
            this.searchValue = '';
            this.searchResults = [];
            this.$emit('blur');
        }
    }
};
</script>

<style lang="less" scoped>
.searchFriend {
    .search-results {
        width: 100%;
        height: 100vh;
        overflow-y: auto;
        .van-cell {
            padding: 10px 16px;
            .van-image {
                margin-right: 12px;
            }
        }
    }
}
</style>
